<template>
  <div :class="{'singer-detail':true, 'singer-details':currentId}">

    <div class="hd"
      @click="previewImage">
      <van-image width="100%"
        fit="cover"
        :src="singerImg">
        <template v-slot:loading>
          <van-loading type="spinner"
            color="#1989fa"
            size="20" />
        </template>
      </van-image>
      <div class="singer-info">
        <p class="name">{{singerData.name}}</p>
        <p class="ranks">歌手榜华地区 No.{{ranking.rank}}</p>
        <div class="simple">
          <p class="nickname">{{singerData.name}}</p>
          <p class="follow">
            <span>关注：0</span>
            <span>粉丝 {{fans |formatNum}}</span>
          </p>
          <p class="identities-area">
            <span>{{identifyTag? identifyTag[0]:''}}</span>
            <span>{{singerData.identities? singerData.identities[0]:''}}</span>
            <span>{{singerData.identities? singerData.identities[1]:''}}</span>
          </p>
        </div>
      </div>
      <!-- 后退 -->
      <van-icon class="icon"
        size="22"
        color="#fff"
        name="arrow-left"
        @click.stop="$router.back()" />
    </div>
    <!-- 歌手 -->

    <!-- 歌手简介 -->
    <Loading v-if="MyLoading"></Loading>
    <singer-intro :singerData="singerData"></singer-intro>

    <!-- 热门单曲 -->

    <!-- 列表 -->
    <van-list v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载">

      <!-- 循环音乐列表 -->
      <MusicList :newSongs="hotSongsList"
        :showNum="true"  @play="play"></MusicList>

    </van-list>

  </div>
</template>

<script>

import { ImagePreview } from 'vant'
import Loading from '@/components/Loading.vue'
import SingerIntro from '@/components/Singer/singer-intro.vue'
import MusicList from '@/components/music-list/music-list.vue'
import { mapMutations, mapState } from 'vuex'

import {
  singerDetails, getHotSongs
} from '@/api/singer.js'

export default {
  props: {
    // 歌手id
    singerID: {
      type: [Number, String],
      required: true
    }
  },
  computed: {
    ...mapState(['currentId'])
  },
  data () {
    return {
      loading: false,
      finished: false,
      error: false,
      MyLoading: true,
      singerData: [], // 歌手数据
      singerImg: '', // 歌手图片
      ranking: [], // 歌手排名
      identifyTag: [],
      hotSongsList: [], // 歌手热歌单曲
      fans: 2000000, // 粉丝
      isShowTab: false
    }
  },

  async created () {
    this.getShowTab(this.isShowTab)

    this.getSingerDetail()
    // 歌手粉丝
    const data = await this.$http.get('/artist/fans', {
      params: {
        id: this.singerID,
        limit: 200
      }
    })
    console.log(data)
  },
  methods: {

    ...mapMutations(['getShowTab']),

    // 歌手详情
    async getSingerDetail () {
      try {
        const {
          data: res
        } = await singerDetails({
          id: this.singerID
        })
        // console.log(res.data.artist)
        // 歌手图片

        this.singerImg = res.data.artist.cover
        // 歌手排名
        this.ranking = res.data.artist.rank
        this.identifyTag = res.data.artist.identifyTag
        // 歌手信息
        this.singerData = res.data.artist
        this.MyLoading = false

        // console.log(this.singerData)
      } catch (err) {
        this.MyLoading = false
      }
    },
    // 图片预览
    previewImage () {
      // 得到所有的img 节点
      console.log(this)
      ImagePreview([
        // 预览图片的地址数组
        this.singerImg
      ])
      //   }
      // })
    },

    async onLoad () {
      // 热歌
      const { data: res } = await getHotSongs({

        id: this.singerID
      })
      const result = res.hotSongs.map(v => {
        v.song = {
          privilege: v.privilege, // 是否
          artists: v.ar, // 艺术家
          album: v.al //
        }
        return v
      })
      console.log(res.artist)

      this.hotSongsList = result
      this.finished = true
    },

    // 把当前音乐数据存储到vuex中
    ...mapMutations(['getCurrentMusic']),
    play (e) {
      this.getCurrentMusic(e)
    }

  },
  components: {
    Loading,
    SingerIntro,
    MusicList

  }

}

</script>

<style lang="less" scoped>
.singer-details{
  margin-bottom: 100px;
}

  .singer-detail {

    .hd {
      position: relative;

      .icon{
        position: absolute;
        top: 15px;
        left: 5px;
        z-index: 1;
      }
      .singer-info {
        position: absolute;
        left: 16px;
        bottom: 30px;
        color: #fff;
        // z-index: 1;

        .name{
          font-size: 20px;
          line-height: 20px;
        }

        .ranks{
          margin-top: 15px;
          font-size: 13px;
        }
        .simple{
         margin-top: 15px;
          opacity: .8;
          font-size: 12px;
          line-height: 12px;

          .follow{
           height: 12px;
           margin-top: 10px;

           span{
              margin-right: 4px;
           }
          }
          .identities-area{
           height: 12px;
            margin-top: 10px;
            span{
              margin-right: 4px;
            }
          }
        }
      }
    }
     .hd::after{
        position: absolute;
        top: 0;
        content: "";
        background: rgba(0,0,0,.2);
        width: 100%;
        height: 97%;
        left: 0;
      }

    h2{
    font-size: 18px;
    padding: 15px;
    background: #fff;
    font-weight: 700;
    }
  }

</style>
